<template>
  <div class="flex flex-col h-full">
    <!--    <vxe-card title="" class="w-full" :border="false">-->
    <!--      <AuForm ref="formRef" :formList="formList" @submit="search" />-->
    <!--    </vxe-card>-->
    <div class="flex bg-[--autata-bg-color] p-[16px] rounded-[2px]">
      <div
        v-for="item in TAB_LIST"
        :key="item.key"
        :class="[
          'tab-wrap flex items-center mr-[16px]',
          item.img ? 'justify-between pl-[24px]' : 'justify-center',
          active === item.key ? 'active' : ''
        ]"
        @click="active = item.key"
      >
        <div class="text-[--autata-font-color] font-bold text-[20px] name">
          {{ t(item.name) }}
        </div>
        <div v-if="item.img" class="h-full flex items-end">
          <img :src="item.img" alt="" />
        </div>
      </div>
    </div>
    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick" />
    </div>

    <CleanFormModal v-model="showModal" :rowData="rowData" @confirm="search" />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { FormulaListProp } from "@/api/teaInfuser/formula";
import {
  deviceCleanStepAdd,
  deviceCleanStepDel,
  deviceCleanStepGetList
} from "@/api/cabinet/device";
import CleanFormModal from "@/views/cabinet/device/deviceClean/components/CleanFormModal.vue";
import { cloneDeep } from "lodash-unified";
import TabAllImg from "@/assets/dashboard/tab_all.png";
import { DEVICE_TYPE_ENUM, DEVICE_TYPE_TRANS } from "@/utils/constants";
import { useI18n } from "vue-i18n";

defineOptions({
  name: "MaterialData"
});

// region 声明ref变量集合
const { proxy } = getCurrentInstance();
const { t } = useI18n();

const TAB_LIST = [
  {
    key: 1,
    name: DEVICE_TYPE_TRANS[DEVICE_TYPE_ENUM.CABINET],
    img: TabAllImg
  }
];
const active = ref(1);
const formList = ref([
  {
    type: "input",
    key: "device_model",
    label: "device_manage.form.device_model",
    placeholder: "device_manage.form.device_model_placeholder"
  }
]);
const gridOption = reactive<PropDefines>({
  isServerPage: false,
  showExportBtn: false,
  columns: [
    {
      field: "type_id",
      title: "device_manage.form.business_mode",
      minWidth: 150,
      align: "center",
      formatter({ cellValue }) {
        const options = [
          {
            label: t("device_manage.form.business_"),
            value: 1
          },
          {
            label: t("device_manage.form.closed"),
            value: 2
          }
        ];
        return options.find(item => item.value === cellValue)?.label;
      }
    },
    // {
    //   field: "clean_type",
    //   title: "device_manage.form.clean_type",
    //   minWidth: 100,
    //   align: "center"
    // },
    {
      field: "create_time",
      title: "device_manage.form.create_time",
      minWidth: 170,
      align: "center"
    }
  ],
  actions: [ACTION_TYPE.EDIT],
  operateTools: [],
  dataSource: []
  // fetchConfig: {
  //   query: {
  //     service: (params: ObjectProps) => {
  //       return deviceCleanStepGetList(params);
  //     },
  //     param: () => formRef.value.getFormData()
  //   }
  // }
});

const showModal = ref(false);
const rowData = ref({});
const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合
async function addOpenAndClose() {
  const closeParam = {
    clean_step: JSON.stringify([]),
    clean_type: "全自动",
    type_id: 2,
    device_type: DEVICE_TYPE_ENUM.CABINET
  };
  const openParam = {
    clean_step: JSON.stringify([]),
    clean_type: "全自动",
    type_id: 1,
    device_type: DEVICE_TYPE_ENUM.CABINET
  };
  await deviceCleanStepAdd(openParam);
  await deviceCleanStepAdd(closeParam);
  const resD = await deviceCleanStepGetList({ size: 0 });
  gridOption.dataSource = resD.data.filter(
    v => v.type_id == 1 || v.type_id == 2
  );
}

async function handleDeviceList() {
  const res = await deviceCleanStepGetList({ size: 0 });
  if (res.data?.length) {
    const data = cloneDeep(res.data);
    // for (const row of res.data) {
    //   if (row.device_model || !row.type_id) {
    //     const params = {
    //       device_model: row.device_model
    //     };
    //     // await deviceCleanStepDel(params);
    //     const findIndex = data.findIndex(
    //       item => item.device_model === row.device_model
    //     );
    //     data.splice(findIndex, 1);
    //   }
    // }
    if (!data.filter(v => v.type_id == 1 || v.type_id == 2).length) {
      await addOpenAndClose();
    } else {
      gridOption.dataSource = data.filter(
        v => v.type_id == 1 || v.type_id == 2
      );
    }
  } else {
    await addOpenAndClose();
  }
}

// endregion

// region 组件事件的集合
const search = async () => {
  const resD = await deviceCleanStepGetList({ size: 0 });
  gridOption.dataSource = resD.data.filter(
    v => v.type_id == 1 || v.type_id == 2
  );
};

type ActionType = {
  key: ACTION_TYPE;
  row: any;
};
const actionClick = ({ key, row }: ActionType) => {
  switch (key) {
    case ACTION_TYPE.TADD:
    case ACTION_TYPE.EDIT:
      rowData.value = row;
      console.log(key, row);
      showModal.value = true;
      break;
    case ACTION_TYPE.DELETE:
      proxy.$auMessageBox
        .confirm("是否确认删除：" + row.device_model + "的数据项？")
        .then(() => {
          const params = {
            device_model: row.device_model
          };
          deviceCleanStepDel(params).then(() => {
            tableRef.value.refresh();
          });
        });
      break;
    default:
      break;
  }
};
// endregion

onMounted(() => {
  handleDeviceList();
});
</script>

<style scoped lang="scss">
.tab-wrap {
  width: 180px;
  height: 100px;
  cursor: pointer;
  background: var(--autata-striped-bg-color);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;

  &:hover {
    border-color: var(--el-color-primary);

    .name {
      color: var(--el-color-primary);
    }
  }

  &.active {
    border-color: var(--el-color-primary);

    .name {
      color: var(--el-color-primary);
    }
  }
}
</style>
